<template>
    <el-dialog v-model="dialogVisible" :title="!queryId ? '新增' : '编辑'" width="70%">
        <XklForm :form="addForm">
        </XklForm>
        <template v-slot:footer>
            <el-button @click="close()">取消</el-button>
            <el-button type="primary" @click="submit()">确定</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { User } from '@/entity/system/user';
import UserService from '@/service/system/user';
import { Vue, Options } from 'vue-class-component'
import { CascaderOption } from 'element-plus'
@Options({
    mounted() {
        console.log('this.$refs.multipleTableRef', this.$refs.multipleTableRef);

        // this.multipleTableRef = this.$refs.multipleTableRef.getRef()
    },
})
export default class AddOrUpdate extends Vue {
    private userService = new UserService()

    queryId?: string = ''
    dialogVisible = false
    customerDialogVisible = false

    multipleTableRef: any = null

    pageNum = 1
    pageSize = 10
    totalCount = 0

    props = { multiple: true }

    companyOptions: CascaderOption[] = []

    addForm: User = new User({
        span: 12,
        labelWidth: 120
    })

    customerNameList: string[] = []


    init(id?: string) {
        this.dialogVisible = true
        this.queryId = id
        this.$nextTick(async () => {
            this.addForm.clear()
            if (id) {
                this.addForm.userId = id
                this.getUserById(id)
            } else {
                this.getRolePost()
            }
        })
    }


    async getRolePost() {
        const data = await this.userService.getRolePost({})
        this.addForm.sourceRoles = data.roles.map(res => {
            return {
                label: res.roleName,
                value: res.roleId,
                id: res.roleId
            }
        })
        this.addForm.posts = data.posts.map(res => {
            return {
                label: res.postName,
                value: res.postId,
                id: res.postId
            }
        })
    }

    async getUserById(id: string) {
        const data = await this.userService.getUserById(id)
        this.addForm.setForm(data.data)

        this.addForm.sourceRoles = data.roles.map(res => {
            return {
                label: res.roleName,
                value: res.roleId,
                id: res.roleId
            }
        })
        this.addForm.posts = data.posts.map(res => {
            return {
                label: res.postName,
                value: res.postId,
                id: res.postId
            }
        })
        // this.addForm.postIds = data.postIds
        this.addForm.roleIds = data.roleIds
        // this.getDataList()
    }


    cascaderChange(val) {
        console.log('val', val);

    }

    close() {
        this.dialogVisible = false
    }

    // 表单提交
    submit() {
        this.addForm.submit(async (done, data: object) => {
            if (this.queryId) {
                await this.userService.updateUser({ userId: this.queryId, ...data })
                this.$message.success("更新成功")
            } else {
                await this.userService.insertUser(data)
                this.$message.success("新增成功")
            }
            this.$emit('refresh')
            this.dialogVisible = false
            done()
        })
    }

}
</script>

<style lang="scss" scoped>
.customerQuery {
    :deep(.el-form-item) {
        margin-bottom: 18px !important;
    }
}

.page_number_jump {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 22px;

    .label {
        margin-left: 20px;
    }

    .page_number {
        box-sizing: border-box;
        width: 80px;
        border-radius: 4px;
        padding: 2px;
        border: 1px solid #DCDFE6;
        transition: all 300ms;
        overflow: hidden;

        &:hover {
            border-color: #C0C4CC;
        }

        :deep(.el-input) {

            height: 26px;
            line-height: 26px;

            .el-input__wrapper {
                .el-input__inner {
                    color: #404040 !important;
                    font-family: "方正字体" !important;
                    text-align: center !important;
                    font-size: 14px;
                    height: 26px;
                    line-height: 26px;
                }

                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none !important;
                }
            }
        }
    }
}
</style>